<template>
    <Table
        class="lo-table"
        size="small"
        :pagination="false"
        bordered
        :customRow="customRow"
        :rowClassName="rowClassName"
        :scroll="{ y: height || 9999, x: scrollx || null }"
        :columns="formatColumn"
        v-bind="custProps">
        <template #bodyCell="{column, record, text, index}">
            <slot name="bodyCell" :index="index" :column="column" :record="record" :text="text"></slot>
        </template>
    </Table>
</template>

<script lang="jsx" setup>
    import { ref, onMounted, useAttrs, computed } from 'vue'
    import { Table } from 'ant-design-vue'

    defineOptions({
        inheritAttrs: false
    })
    const emit = defineEmits(['contextmenu'])
    const props = defineProps({
        highlightCurrent: {
            type: Boolean,
            default: false
        },
        height: {
            type: Number,
            default: 0
        },
        scrollx: { //表格的长度，超出后会自动滚动
            type: String,
            default: ''
        },
        columns: {
            type: Array,
            default: () => []
        },
        customRowStyle: {
            type: Function,
            default: () => {}
        }
    })

    const attrs = useAttrs()
    const custProps = computed(() => {
        return attrs
    })

    const formatColumn = computed(() => {
        let column = props.columns
        column.forEach(item => {
            if(item.type == 'index') {
                item.width = item.width || 50
                item.key = 'index'
                if(!item.customRender) item.customRender = ({ index }) => index + 1;
            }
            item.align = item.align || 'center'
            // item.resizable = item.width ? true : false

        })
        return column
    })


    onMounted(() => {

    })

    // 选中高亮相关
    let rowIndex = ref(-1);
    function rowClassName(record, index) {
        return rowIndex.value === index ? 'highlight_row' : '0'
    }
    function customRow(record, index) {
        const getRowStyle = () => {
            let styleInfo = props.customRowStyle(record, index)
            if(styleInfo) {
                if(typeof styleInfo == 'string') {
                    return styleInfo
                } else if(typeof styleInfo == 'object') {
                    if(Array.isArray(styleInfo)) {
                        throw new Error('customRowStyle 不能返回一个数组')
                    } else {
                        let styleStr = JSON.stringify(styleInfo).slice(1, -1)
                        styleStr = styleStr.replace(/"/g, '')
                        return styleStr
                    }
                } else {
                    throw new Error('customRowStyle必须返回字符串或者对象')
                }
            }
        }
        return {
            onClick: (e) => {
                if(props.highlightCurrent) {
                    rowIndex.value = index
                    if(attrs.onCurrentRow) {
                        attrs.onCurrentRow({index, record})
                        // emit('currentRow', {index, record})
                    }
                }
            },
            onContextmenu: e => {
                e.preventDefault();
                let pos = {
                    top: e.clientY,
                    left: e.clientX
                }
                emit('contextmenu', pos, record, index)

            },
            style: getRowStyle()

        }
    }

    function setCurrentRow(index) {
        rowIndex.value = index
    }

    function setRowIndex(index) {
        rowIndex.value = index
    }
    defineExpose({
        setRowIndex,
        setCurrentRow
    })
</script>

<style lang="less" scoped>

.lo-table{
    :deep(th.ant-table-cell) {
        white-space: normal!important;
    }
    :deep(.ant-table-body){
        border-right: 1px solid #f0f0f0;
        &::after {
            content: "";
            width: 8px;
            height: 1px;
            background: #f0f0f0;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        .ant-table-row-expand-icon {
            border-color: #666;
        }
    }

        :deep(.highlight_row) {
            // background: @baseColor!important;
            background: #74aeff!important;
            color: #fff;
            td{
                background: #74aeff!important;
                color: #fff;
            }
            .link, .nowrap_link{
                color: #fff!important;
            }
            .ant-table-cell-row-hover{
                // background: @baseColor!important;
                background: #74aeff!important;
            }
        }


    :deep(.ant-table-tbody) {
        >tr.ant-table-row:hover>td,
        >tr >td.ant-table-cell-row-hover {
            background: #ebf3fe;
        }
    }

}

</style>
